import React, { useEffect, useRef } from 'react';
import { Graph } from '@antv/x6';

const index = () => {
  const graphContainerRef = useRef(null);
 
  useEffect(() => {
    if (!graphContainerRef.current) return;
 
    const graph = new Graph({
      container: graphContainerRef.current,
      width: 800,
      height: 600,
      grid: true,
    });
 
    // 添加节点和边
    const node = graph.addNode({
      x: 100,
      y: 100,
      width: 100,
      height: 40,
      label: 'Hello',
    });
 
    const edge = graph.addEdge({
      source: node,
      target: { x: 300, y: 100 }, // 直接指定目标点也可以，不一定非得是节点
      label: 'Link',
    });
 
    // 其他图形配置...
  }, []); // 使用空依赖数组确保只在组件挂载时运行一次
 
  return <div ref={graphContainerRef} style={{ width: '100%', height: '100%' }} />;
};
 
export default index;